body {
    font-family: 'Microsoft YaHei','Open Sans', 'trebuchet ms', arial, sans-serif;
  
}
ul{
	list-style:none;
	padding-left:0;	
	
}
#sidebar {
    
    width: 35px;
    position: fixed;
	top:405px;
	
    background-color: #333;
	color:#CCC;
    min-height: 40%;
    z-index: 100;
}


.item {
    text-align: center;
    margin-top: 15px;
    cursor: pointer;
	font-size: 12px;
}

#closeBar {
    text-align: center;
    position: absolute;
    bottom: 30px;
    width: 35px;
    cursor: pointer;
}
.sideBar_move_left{
}
.closeBar_move_right{
	left:160px;
}

@-webkit-keyframes closeBar_move_right {
    from {
    }
    to {
        -webkit-transform: translateX(160px) rotate(405deg) scale(1.5);
        transform: translateX(160px) rotate(405deg) scale(1.5);
    }
}

@keyframes closeBar_move_right {
    from {
    }
    to {
        -webkit-transform: translateX(160px) rotate(405deg) scale(1.5);
        transform: translateX(160px) rotate(405deg) scale(1.5);
    }
}

@-webkit-keyframes closeBar_move_left {
    from {
        -webkit-transform: scale(1.5);
        transform:scale(1.5);
    }
    to {
        -webkit-transform: translateX(-160px) rotate(-45deg) scale(1);
        transform: translateX(-160px) rotate(-45deg) scale(1);
    }
}

@keyframes closeBar_move_left {
    from {
        -webkit-transform: scale(1.5);
        transform:scale(1.5);
    }
    to {
        -webkit-transform: translateX(-160px) rotate(-45deg) scale(1);
        transform: translateX(-160px) rotate(-45deg) scale(1);
    }
}

@-webkit-keyframes sidebar_move_left {
    from {
    }
    to {
        -webkit-transform: translateX(-160px);
        transform: translateX(-160px);
    }
}

@keyframes move_left {
    from {
    }
    to {
        -webkit-transform: translateX(-160px);
        transform: translateX(-160px);
    }
}

@-webkit-keyframes move_right {
    from {
    }
    to {
        -webkit-transform: translateX(120px);
        transform: translateX(120px);
    }
}

@keyframes move_right {
    from {
    }
    to {
        -webkit-transform: translateX(120px);
        transform: translateX(120px);
    }
}


.move_right {
    -webkit-animation-name            : move_right;
    animation-name            : move_right;
    -webkit-animation-duration        : 1s;
    animation-duration        : 1s;
    -webkit-animation-iteration-count : 1;
    animation-iteration-count : 1;
    -webkit-animation-fill-mode : forwards;
    animation-fill-mode : forwards;
}

.move_left {
    -webkit-animation-name            : move_left;
    animation-name            : move_left;
    -webkit-animation-duration        : 1s;
    animation-duration        : 1s;
    -webkit-animation-iteration-count : 1;
    animation-iteration-count : 1;
    -webkit-animation-fill-mode : forwards;
    animation-fill-mode : forwards;
}

.closeBar_move_right {
    -webkit-animation-name            : closeBar_move_right;
    animation-name            : closeBar_move_right;
    -webkit-animation-duration        : 1s;
    animation-duration        : 1s;
    -webkit-animation-iteration-count : 1;
    animation-iteration-count : 1;
    -webkit-animation-fill-mode : forwards;
    animation-fill-mode : forwards;
}

.closeBar_move_left {
    -webkit-animation-name            : closeBar_move_left;
    animation-name            : closeBar_move_left;
    -webkit-animation-duration        : 1s;
    animation-duration        : 1s;
    -webkit-animation-iteration-count : 1;
    animation-iteration-count : 1;
    -webkit-animation-fill-mode : forwards;
    animation-fill-mode : forwards;
}


